<layout-outlet #layout="layoutOutlet">
  <div header>
    <navbar-outlet>
      <div navbarLeft (click)="cancel($event)">取消</div>
      <div navbarTitle>
        {{title}}
        <span class="timelong" *ngIf="showTip">
          {{pressTime}}s
        </span>
      </div>
      <div navbarRight (click)="sure($event)">确定</div>
    </navbar-outlet>
  </div>
  <div class="voice-recorder" *ngIf="platform.WECHAT">
    <audio #audio controls muted></audio>
    <div *ngIf="showPreview">
      <div class="voice-preview-time">
        <i class="iconfont icon-icon7"></i>
        时长&nbsp; {{pressTime}}s
      </div>
      <div class="voice-preview-btns">
        <button mat-fab color="accent" (click)="play($event)" *ngIf="playStatus !== 'playing'">
          <i class="iconfont icon-bofang"></i>
        </button>
        <button mat-fab color="accent" (click)="stop($event)" *ngIf="playStatus ===  'playing'">
          <i class="iconfont icon-stop"></i>
        </button>
        <button mat-fab [disabled]="sending" color="primary" (click)="send()">
          <mat-progress-spinner *ngIf="sending" class="spinner" color="accent" mode="indeterminate"></mat-progress-spinner>
          <i class="iconfont icon-send" *ngIf="!sending"></i>
        </button>
        <button mat-fab color="accent" (click)="back($event)">
          <i class="iconfont icon-zhongzhi"></i>
        </button>
      </div>
    </div>
    <div *ngIf="!showPreview">
      <button mat-fab ngPress (ngPress)="onPress($event)" (ngPressing)="onPressing($event)" (ngRelease)="onRelease($event)">
        <i class="iconfont icon-yuyin"></i>
      </button>
      <div class="tip">按住录音</div>
    </div>
  </div>
  <div class="empty" *ngIf="!platform.WECHAT">
    暂不支持，请在微信浏览器中打开！
  </div>
</layout-outlet>
